<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
        <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen">

                <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>
        <body>
                <header th:fragment="header">
                        <div id="Header">

                                <div id="Logo">
                                        <div id="LogoContent">
                                                <a href="/catalog/view"><img src="../images/logo-topbar.gif"/></a>
                                        </div>
                                </div>

                                <div id="Menu">
                                        <div id="MenuContent">
                                                <a href="/cart/viewItem" th:if="${account!=null && userInfo.root==0}"><img align="middle" name="img_cart" src="../images/cart.gif"/></a>
                                                <img th:if="${account!=null && userInfo.root==0}" align="middle" src="../images/separator.gif"/>

                                                <a href="/account/signonForm" th:if="${account}==null">Sign In</a>
                                                <a href="/account/signOut" th:unless="${account}==null">Sign Out</a>
                                                <img align="middle" th:unless="${account}==null" src="../images/separator.gif"/>
                                                <a href="/account/goToMyAccount" th:unless="${account==null || userInfo.root == null || userInfo.root == 1}">My Account</a>
<!--                                                <img align="middle" src="../images/separator.gif" th:unless="${account==null || userInfo.root == null || userInfo.root == 1}" />-->
                                                <!--                                                todo:order manage的跳转-->
                                                <a href="/viewOrder/joinOrder" th:if="${account!=null && userInfo.root == 1}">Order Manage</a>
                                                <img th:if="${account!=null && userInfo.root == 1}" align="middle" src="../images/separator.gif"/>
                                                <!--                                                todo:user manage的跳转-->
                                                <a href="/account/userManager" th:if="${account!=null && userInfo.root == 1}">User Manage</a>

                                                <img align="middle" src="/images/separator.gif"/>
                                                <a href="../help.html">?</a>
                                        </div>
                                </div>

                                <div id="Search">
                                        <div id="SearchContent">
                                                <form action="search" method="post">
                                                        <input type="text" name="keyword" size="14"/> <input
                                                      type="submit"
                                                      name="searchProducts" value="Search"/>
                                                </form>
                                        </div>
                                </div>

                                <div id="QuickLinks">
                                        <a href="/catalog/viewCategory?categoryId=FISH">
                                                <img src="../images/sm_fish.gif"/>
                                        </a>
                                        <img src="../images/separator.gif"/>
                                        <a href="/catalog/viewCategory?categoryId=DOGS">
                                                <img src="../images/sm_dogs.gif"/>
                                        </a>
                                        <img src="../images/separator.gif"/>
                                        <a href="/catalog/viewCategory?categoryId=REPTILES">
                                                <img src="../images/sm_reptiles.gif"/>
                                        </a>
                                        <img src="../images/separator.gif"/>
                                        <a href="/catalog/viewCategory?categoryId=CATS">
                                                <img src="../images/sm_cats.gif"/>
                                        </a>
                                        <img src="../images/separator.gif"/>
                                        <a href="/catalog/viewCategory?categoryId=BIRDS">
                                                <img src="../images/sm_birds.gif"/>
                                        </a>
                                        <img th:if="${account!=null && userInfo.root == 1}" src="../images/separator.gif"/>
                                        <a th:if="${account!=null && userInfo.root == 1}" href="/catalogM/viewAllCategory" class="viewAllCategory">View All Category</a>
                                </div>

                        </div>
                </header>
        </body>
</html>